<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>登录界面</title>
		<link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="../js/jquery-3.5.1.js"></script>
		<script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
		<script src="login.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			html,
			body,
			.container {
				height: 100%;
				width: 100%;
			}
			.container{
				background-image: url(img/bg_container.jpg);
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			.one{
				width: 500px;
				height: 400px;
				position: relative;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				background-color: rgb(148, 159, 166,0.5);
				
			}
			#login_form{
				width: 400px;
				position: relative;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				
			}
			
		</style>
	</head>
	<body>
		<div class="container">
			<div class="one">
				<form id="login_form">
					<h2 class="form-signin-heading" style="text-align: center;">宿舍管理系统</h2>	
					 <div class="form-group">
					    <input type="text" class="form-control " id="login_account" placeholder="账号或者学号(电话号码)" >
					  </div>
					  <div class="form-group">
					     <input type="password" class="form-control" id="login_password" placeholder="密码" value="123456">
					   </div>
					   <div>
						   <label class="radio-inline">
						     <input type="radio" name="login_inlineRadioOptions"  value="admin"> 系统管理员
						   </label>
						   <label class="radio-inline">
						     <input type="radio" name="login_inlineRadioOptions"  value="administrators"> 宿舍管理员
						   </label>
						   <label class="radio-inline">
						     <input type="radio" name="login_inlineRadioOptions"  value="student"> 学生
						   </label>
					   </div>
					   <div class="checkbox">
					       <label>
					         <input type="checkbox" name="cb_rem"  value="1"> 记住密码
					       </label>
					     </div>
						<div class="form-group">
					  <button type="button" class="btn btn-primary btn-lg btn-block" id="btn_login" >登录</button>
							
							</div>
				      <div>
					  <button class="btn btn-default" style="width: 49%;" type="button" value="zhuc" data-toggle="modal" data-target="#myModal">注册</button>
				      <button  class="btn btn-default" style="width: 49%;" type="button" value="wj">忘记密码</button>
					  </div>
				</form>	
			</div>
		</div>
		<!--注册的模态页面-->
		<div id="myModal" class="modal fade" tabindex="-1" role="dialog" >
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" style="text-align: center;">新用户注册</h4>
		      </div>
		      <div class="modal-body">
		       <form class="form-horizontal">
				   <div class="form-group" style="text-align: center;">
					   <label class="radio-inline">
						 <input type="radio" name="reg_inlineRadioOptions" id="inlineRadio2" value="ators"> 宿舍管理员
					   </label>
					   <label class="radio-inline">
						 <input type="radio" name="reg_inlineRadioOptions" id="inlineRadio3" value="student"> 学生
					   </label>
				   </div>
				  <div class="form-group">
				      <label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
				      <div class="col-sm-10">
				        <input type="text" class="form-control" id="n_user" placeholder="用户名或者学号">
				      </div>
				    </div> 
					  <div class="form-group ">
					      <label for="inputEmail3" class="col-sm-2 control-label">电话号码</label>
					      <div class="col-sm-10">
					        <input type="text" class="form-control" id="Telephone" placeholder="请输入电话号码">
					      </div>
					    </div>
						<div class="form-group ">
						    <label for="inputEmail3" class="col-sm-2 control-label">密码</label>
						    <div class="col-sm-10">
						      <input type="password" class="form-control" id="password" placeholder="请设置密码">
						    </div>
						  </div>
						  <div class="form-group ">
						      <label for="inputEmail3" class="col-sm-2 control-label">确认密码</label>
						      <div class="col-sm-10">
						        <input type="password" class="form-control" id="se_password" placeholder="再次输入密码">
						      </div>
						    </div>
			   </form>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		        <button id="sava" type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
		      </div>
		    </div><!-- /.modal-content -->
		  </div><!-- /.modal-dialog -->
		</div><!-- /.modal -->
	</body>
</html>
